<template>
  <div class="reception-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">接待流程</h2>
      </div>
    </div>

    <div class="process-timeline">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step title="接待申请" @click.native="goToStep('jiedaisq')">
          <template slot="icon">
            <i class="el-icon-document"></i>
          </template>
        </el-step>
        <el-step title="部门审批" @click.native="goToStep('bumenshenpi')">
          <template slot="icon">
            <i class="el-icon-user"></i>
          </template>
        </el-step>
        <el-step title="行政审批" @click.native="goToStep('xingzhengshenpi')">
          <template slot="icon">
            <i class="el-icon-s-check"></i>
          </template>
        </el-step>
        <el-step title="接待安排" @click.native="goToStep('jiedaianpai')">
          <template slot="icon">
            <i class="el-icon-date"></i>
          </template>
        </el-step>
        <el-step title="费用报销" @click.native="goToStep('feiyongbaoxiao')">
          <template slot="icon">
            <i class="el-icon-money"></i>
          </template>
        </el-step>
      </el-steps>

      <div class="process-content">
        <div class="current-step-info">
          <h3>{{ getCurrentStepTitle() }}</h3>
          <p>{{ getCurrentStepDescription() }}</p>
          <el-button type="primary" @click="handleCurrentStep">进入当前步骤</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0,
      steps: [
        { title: '接待申请', path: '/main/xingzheng/jiedai/jiedaisq', description: '填写接待申请单' },
        { title: '部门审批', path: '/main/xingzheng/jiedai/bumenshenpi', description: '部门领导审批' },
        { title: '行政审批', path: '/main/xingzheng/jiedai/xingzhengshenpi', description: '行政部门审批' },
        { title: '接待安排', path: '/main/xingzheng/jiedai/jiedaianpai', description: '安排接待事项' },
        { title: '费用报销', path: '/main/xingzheng/jiedai/feiyongbaoxiao', description: '接待费用报销' }
      ]
    }
  },
  methods: {
    getCurrentStepTitle() {
      return this.steps[this.currentStep].title
    },
    getCurrentStepDescription() {
      return this.steps[this.currentStep].description
    },
    handleCurrentStep() {
      const currentStepPath = this.steps[this.currentStep].path
      if (currentStepPath) {
        this.$router.push(currentStepPath)
      } else {
        this.$message.info('该步骤功能开发中')
      }
    },
    goToStep(path) {
      if (path === 'jiedaisq') {
        this.$router.push('/main/xingzheng/jiedai/jiedaisq')
      } else if (path === 'bumenshenpi') {
        this.$router.push('/main/xingzheng/jiedai/bumenshenpi')
      } else if (path === 'xingzhengshenpi') {
        this.$router.push('/main/xingzheng/jiedai/xingzhengshenpi')
      } else if (path === 'jiedaianpai') {
        this.$router.push('/main/xingzheng/jiedai/jiedaianpai')
      } else if (path === 'feiyongbaoxiao') {
        this.$router.push('/main/xingzheng/jiedai/feiyongbaoxiao')
      } else {
        this.$router.push(`/main/biao/${path}`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.reception-process {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    
    .header-content {
      text-align: center;
    }

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .process-timeline {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .el-steps {
      margin-bottom: 40px;
    }
  }

  .process-content {
    padding: 20px;
    border-top: 1px solid #EBEEF5;

    .current-step-info {
      text-align: center;

      h3 {
        color: #303133;
        margin-bottom: 10px;
      }

      p {
        color: #606266;
        margin-bottom: 20px;
      }
    }
  }

  :deep(.el-step__icon) {
    cursor: pointer;
  }
}
</style> 